<template>
	<view class="fromToCountry">
		<div class="item" v-if="comCountry('departure_country') === '0'">
			<img :src="HTTP_IMG_UTL+'huangjin.png'" alt="" />
		</div>
		<div class="item" v-if="comCountry('departure_country') === '1'">
			<img :src="HTTP_IMG_UTL+'huangji.png'" alt="" />
		</div>
		<div class="item2">
			<image class="line" :src='serverImageUrl("/static/newStyleIcon/flagline.png")' alt="" />
		</div>
		<div class="item" v-if="comCountry('reach_country') === '0'">
			<img :src="HTTP_IMG_UTL+'huangjin.png'" alt="" />
		</div>
		<div class="item" v-if="comCountry('reach_country') === '1'">
			<img :src="HTTP_IMG_UTL+'huangji.png'" alt="" />
		</div>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	export default {
		props: {
			item: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				HTTP_IMG_UTL
			}
		},
		computed: {
			comCountry() {
				return (type) => {
					if (typeof this.item[type] === "string") {
						return this.item[type]
					} else if (typeof this.item[type] === "object") {
						return this.item[type].value
					}
				}
			}
		},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.fromToCountry {
		display: inline-block;
		display: flex;
		align-items: center;

		.item2 {
			display: flex;
			align-items: center;
			height: 48rpx;
		}

		.item {
			width: 66rpx;
			height: 48rpx;
			border-radius: 8rpx;
			background: #F5F4F9;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		img {
			width: 50rpx;
			height: 32rpx;
		}

		image {
			width: 50rpx;
			height: 32rpx;

			&.line {
				width: 42rpx;
				height: 24rpx;
				margin: 0 20rpx;
			}
		}
	}
</style>